<template>
  <div class="common-layout">
    <el-container class="wrap">
      <el-header>
        <div class="row between">
          <div class="row">
            <h3 style="margin-right: 16px">巴挂数学可视化</h3>
            <el-select-v2
              v-model="value"
              :options="options"
              placeholder="Please select"
              size="large"
              style="width: 240px"
            />
          </div>
          <div class="row">
            <el-button type="primary" @click="visible = true">协作</el-button>
            <el-button style="margin-right: 16px; margin-left: 12px">
              分享
            </el-button>
            <el-image
              style="width: 40px; height: 40px; border-radius: 50%"
              src="/images/header.webp"
            ></el-image>
          </div>
        </div>
      </el-header>
      <component :is="currentView" />

      <div v-show="showMask" class="mask">
        <div class="user" style="top: 400px; left: 300px">
          <el-image src="images/cusor.webp" style="width: 20px"></el-image>
          <div style="color: aqua; margin-left: 8px">张三</div>
        </div>
        <div class="user" style="top: 470px; left: 600px">
          <el-image src="images/cusor.webp" style="width: 20px"></el-image>
          <div style="color: yellow; margin-left: 8px">李四</div>
        </div>
        <div class="user" style="top: 400px; left: 800px">
          <el-image src="images/cusor.webp" style="width: 20px"></el-image>
          <div style="color: red; margin-left: 8px">赵六</div>
        </div>
        <div class="user" style="top: 600px; left: 770px">
          <el-image src="images/cusor.webp" style="width: 20px"></el-image>
          <div style="color: blue; margin-left: 8px">钱七</div>
        </div>
      </div>

      <el-dialog v-model="visible" title="协作" width="500">
        <el-form :model="form">
          <el-form-item label="邀请人">
            <!-- 复选框 -->
            <el-checkbox-group v-model="form.invite">
              <el-checkbox label="张三" name="invite"></el-checkbox>
              <el-checkbox label="李四" name="invite"></el-checkbox>
              <el-checkbox label="王五" name="invite"></el-checkbox>
              <el-checkbox label="赵六" name="invite"></el-checkbox>
              <el-checkbox label="钱七" name="invite"></el-checkbox>
              <el-checkbox label="孙八" name="invite"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="权限">
            <el-radio-group v-model="form.radio">
              <el-radio value="1" label="可编辑" name="radio"></el-radio>
              <el-radio value="2" label="只读" name="radio"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="visible = false">确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import Wrap2d from './2d/index.vue'
import Wrap3d from './3d/index.vue'

const options = [
  { label: '几何/绘图', value: '1' },
  { label: '3d计算器', value: '2' },
]
const value = ref('2')
const visible = ref(false)
const showMask = ref(false)

const form = reactive({
  invite: [],
  radio: '1',
})

const currentView = computed(() => {
  return value.value === '1' ? Wrap2d : Wrap3d
})
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100vh;
}

.el-header {
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  align-items: center;
}
.between {
  width: 100%;
  justify-content: space-between;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  .user {
    position: absolute;
    display: flex;
    align-items: center;
  }
}
</style>
